<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>

	<body>

		<!--//vue 基础-->
		<div id="root">{{msg}}{{number}}

			<h1 v-text="content"></h1>

			<h1 v-html="content"></h1>

			<h1 v-on:click="handlerClick">版本</h1>

            <!--//@click 和 v-on：click 都可以实现点击事件的绑定--> 
			<h1 @click="handlerClick">版本1</h1> 
			<!--//属性绑定-->
			<div v-bind:title=" 'del li'+title">dddd</div>
			<div :title=" 'del li'+title">dddd1</div>

			<!--//数据双向绑定-->
			<input v-model="content" />
			<div>{{content}}</div>

			<!--计算属性--> 
			姓：
			<input v-model="firstName">
			 名： <input v-model="lastName" />
			<div>{{fullName}}</div>
			
		<!--侦听器-->
		<div>{{count}}</div>
		
		</div>

		<script>
			new Vue({ //实例
				el: "#root", //挂载点
				//template:'<h1>asdasd{{msg}}</h1>', //模版
				data: { //数据
					msg: "hello world",
					number: 123,
					content: "<h1>hello</h1>",
					title: "this is a title",
					firstName: '',
					lastName: '',
					count:0
				},
				methods: {
					handlerClick: function() {
						this.content = "world";
					}
				},
				computed: {
					fullName: function() {
						return this.firstName + ' ' + this.lastName;
					}
				},
//				侦听器,只要 firstname 和 lastname 改变了就会将count+1
				watch:{      
//					firstName:function(){
//					     this.count ++;	
//					},
//					lastName:function(){
//						this.count++;
//					}
                    fullName:function(){
                    	this.count++;
                    }
				}
			});
		</script>
	</body>
</html>